
"use client";
import { HiBookOpen, HiMoon, HiLightBulb } from "react-icons/hi";
import { Accordion, Card, Badge, Button } from "flowbite-react";
import WorkTimeLine from "./WorkTimeLine";
export default function Skill() {

    const handleClick = (e) => {
        e.preventDefault(); // 如果按钮在表单内，阻止表单提交
        window.location.href = href; // 使用当前窗口跳转到外部链接
        // 或者使用 window.open(href, '_blank') 在新标签页中打开链接
    };

    function Progress({ title, percent }) {
        return <>
            <div className="mb-1 text-base font-medium dark:text-white">{title}</div>
            <div className="w-full bg-gray-200 rounded-full h-1.5 mb-4 dark:bg-gray-700">
                <div className="bg-blue-600 h-1.5 rounded-full dark:bg-blue-500" style={{ width: percent }}></div>
            </div>
        </>
    }

    function TitleBanner({ children, title, content }) {
        return <>
            <div className="flex bg-purple-50 w-full " >
                <div className="items-center justify-center flex w-10 ">
                    {/* <HiBookOpen style={{ fontSize: "30px" }} /> */}
                    {children}
                </div>
                <div className="flex flex-col items-ccenter">
                    <div className="text-base font-medium dark:text-white">
                        {title}
                    </div>
                    <div className="text-xs font-light dark:text-white">
                        {content}
                    </div>
                </div>
            </div>
        </>
    }

    function ProjectCard({ href, language, title, children }) {
        return <>
            <Card className="max-w-sm">
                <h5 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
                    <a href={href}>{title}</a>
                </h5>
                <Badge color="purple" size="xs">{language}</Badge>
                {children}
            </Card>
        </>
    }


    return <>
        <div className="flex flex-col " id="skill">

            <TitleBanner title={"技能"} content={"使用的前端和后端编程语言"}>
                <HiBookOpen style={{ fontSize: "30px" }} />
            </TitleBanner>

            <div className="flex"  >
                <div className="p-5 flex-1">
                    <Progress title="java" percent="90%" />
                    <Progress title="golang" percent="50%" />
                </div>
                <div className="p-5 flex-1">
                    <Progress title="clojure" percent="50%" />
                    <Progress title="python" percent="50%" />
                </div>
                <div className="p-5 flex-1">
                    <Progress title="opencv" percent="30%" />
                    <Progress title="c" percent="50%" />
                </div>
                <div className="p-5 flex-1">
                    <Progress title="机器学习" percent="50%" />
                    <Progress title="前端" percent="60%" />
                </div>
            </div>


        </div>

        <div className="flex flex-col" id="project">

            <TitleBanner title={"项目"} content={"贡献的开源项目"}>
                <HiLightBulb style={{ fontSize: "30px" }} />
            </TitleBanner>

            <div className="flex p-5 gap-10">
                <ProjectCard href="https://gitee.com/sevenclear/hiccup-plus" title="hiccup-plus" language="clojure">
                    <p className="font-xs text-gray-700 dark:text-gray-400">
                        hiccup-plus 是一个基于 Clojure 语言的 Hiccup 库扩展项目，通过增强 Hiccup 的功能，为开发者提供更加灵活和强大的网页构建能力
                    </p>
                </ProjectCard>

                <ProjectCard href="https://gitee.com/sevenclear/zen" title="ZEN" language="Golang">
                    <p className="font-xs text-gray-700 dark:text-gray-400">
                        ZEN是一个开源的广告拦截软件，扩展了广告拦截策略。
                    </p>
                </ProjectCard>


                <ProjectCard href="https://gitee.com/sevenclear/mincwshell" title="mincwshell" language="Golang">
                    <p className="font-xs text-gray-700 dark:text-gray-400">
                        提供windows缺少的shell命令
                    </p>
                </ProjectCard>

            </div>

        </div>

        <div className="flex flex-col">

            <TitleBanner title={"项目"} content={"参与的公司项目"}>
                <HiLightBulb style={{ fontSize: "30px" }} />
            </TitleBanner>

            <div className="flex p-5 gap-10">
                <ProjectCard href="#" title="KCSP密码服务平台" language="java">
                    <p className="font-xs text-gray-700 dark:text-gray-400">
                        密码服务平台，提供各个密码服务开通上架功能维护。
                    </p>
                </ProjectCard>
                <ProjectCard href="#" title="水印系统" language="java">
                    <p className="font-xs text-gray-700 dark:text-gray-400">
                        数据安全水印，水印标品
                    </p>
                </ProjectCard>
                <ProjectCard href="#" title="数据安全产品" language="java">
                    <p className="font-xs text-gray-700 dark:text-gray-400">
                        数据库，数据脱敏服务。
                    </p>
                </ProjectCard>
                <ProjectCard href="#" title="Airsoft企业版" language="java">
                    <p className="font-xs text-gray-700 dark:text-gray-400">
                        工程企业管理软件
                    </p>
                </ProjectCard>
            </div>
        </div>
        <div className="flex">
        <TitleBanner title={"公司"} content={"工作过的公司"}>
                <HiLightBulb style={{ fontSize: "30px" }} />
            </TitleBanner>
        </div>

        <div className="flex flex-col items-center ">
           
            <div className="items-center h-screen">
                <WorkTimeLine />
            </div>

        </div>


    </>

}